<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>源码来自：http://www.htmleaf.com/Demo/201812055443.html</title>
		<link rel="stylesheet" type="text/css" href="css/fm.css" />
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
		<style>
			@CHARSET "ISO-8859-1";

			/* Reset CSS
		 * --------------------------------------- */
			body,
			div,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			pre,
			form,
			fieldset,
			input,
			textarea,
			p,
			blockquote,
			th,
			td {
				padding: 0;
				margin: 0;
			}

			a {
				text-decoration: none;
			}

			table {
				border-spacing: 0;
			}

			fieldset,
			img {
				border: 0;
			}

			address,
			caption,
			cite,
			code,
			dfn,
			em,
			strong,
			th,
			var {
				font-weight: normal;
				font-style: normal;
			}

			strong {
				font-weight: bold;
			}

			ol,
			ul {
		 	list-style: none;
				margin: 0;
				padding: 0;
			}

			caption,
			th {
				text-align: left;

			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: normal;
				font-size: 100%;
				margin: 0;
				padding: 0;
				color: #444;
			}

			q:before,
			q:after {
				content: '';
			}

			abbr,
			acronym {
				border: 0;
			}


			/* Custom CSS
		 * --------------------------------------- */
			body {
				font-family: arial, helvetica;
				color: #333;
				color: rgba(0, 0, 0, 0.5);
			}

			.wrap {
				margin-left: auto;
				margin-right: auto;
				width: 960px;
				position: relative;
			}

			h1 {
				font-size: 6em;
			}

			p {
				font-size: 2em;
			}

			.intro p {
				width: 50%;
				margin: 0 auto;
				font-size: 1.5em;
			}

			.section {
				text-align: center;
			}

			#menu li {
				display: inline-block;
				margin: 10px;
				color: #000;
				background: #fff;
				background: rgba(255, 255, 255, 0.5);
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}

			#menu li.active {
				background: #666;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
			}

			#menu li a {
				text-decoration: none;
				color: #000;
			}

			#menu li.active a:hover {
				color: #000;
			}

			#menu li:hover {
				background: rgba(255, 255, 255, 0.8);
			}

			#menu li a,
			#menu li.active a {
				padding: 9px 18px;
				display: block;
			}

			#menu li.active a {
				color: #fff;
			}

			#menu {
				position: fixed;
				top: 0;
				left: 0;
				height: 40px;
				z-index: 70;
				width: 100%;
				padding: 0;
				margin: 0;
			}

			.twitter-share-button {
				position: fixed;
				z-index: 99;
				right: 149px;
				top: 9px;
			}

			#download {
				margin: 10px 0 0 0;
				padding: 15px 10px;
				color: #fff;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				background-color: #49afcd;
				background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
				background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
				background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
				background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
				background-image: linear-gradient(top, #5bc0de, #2f96b4);
				background-repeat: repeat-x;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
				border-color: #2f96b4 #2f96b4 #1f6377;
				border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
				filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
				vertical-align: middle;
				cursor: pointer;
				display: inline-block;
				-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
			}

			#download a {
				text-decoration: none;
				color: #fff;
			}

			#download:hover {
				text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
				background-color: #2F96B4;
				background-position: 0 -15px;
				-webkit-transition: background-position .1s linear;
				-moz-transition: background-position .1s linear;
				-ms-transition: background-position .1s linear;
				-o-transition: background-position .1s linear;
				transition: background-position .1s linear;
			}

			#infoMenu {
				height: 20px;
				color: #f2f2f2;
				position: fixed;
				z-index: 70;
				bottom: 0;
				width: 100%;
				text-align: right;
				font-size: 0.9em;
				padding: 8px 0 8px 0;
			}

			#infoMenu ul {
				padding: 0 40px;
			}

			#infoMenu li a {
				display: block;
				margin: 0 22px 0 0;
				color: #333;
			}

			#infoMenu li a:hover {
				text-decoration: underline;
			}

			#infoMenu li {
				display: inline-block;
				position: relative;
			}

			#examplesList {
				display: none;
				background: #282828;
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
				padding: 20px;
				float: left;
				position: absolute;
				bottom: 29px;
				right: 0;
				width: 638px;
				text-align: left;
			}

			#examplesList ul {
				padding: 0;
			}

			#examplesList ul li {
				display: block;
				margin: 5px 0;
			}

			#examplesList ul li a {
				color: #BDBDBD;
				margin: 0;
			}

			#examplesList ul li a:hover {
				color: #f2f2f2;
			}

			#examplesList .column {
				float: left;
				margin: 0 20px 0 0;
			}

			#examplesList h3 {
				color: #f2f2f2;
				font-size: 1.2em;
				margin: 0 0 15px 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.4);
				-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
				-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
				padding: 0 0 5px 0;
			}



			/* Demos Menu
		 * --------------------------------------- */
			#demosMenu {
				position: fixed;
				bottom: 10px;
				right: 10px;
				z-index: 999;
			}

			h1 {
				font-weight: 900;
				font-size: 8em;
				-webkit-text-shadow: 0 .3rem .9rem rgba(0, 0, 0, .4);
				text-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, .4);
				letter-spacing: -3px;
			}

			h1,
			.intro p {
				color: #fff;
				font-family: 'Source Sans Pro', sans-serif;
			}

			.intro p {
				text-shadow: -1px 1px 8px rgba(0, 0, 0, .8);
			}

			#section1 h1 {
				-webkit-text-shadow: none;
				text-shadow: none;
			}

			#slide1-1 h1 {
				color: #444;
			}

			/*
		* Setting the backgrounds for each section / slide
		*/
			#section4 .fp-bg:before,
			#section2 .fp-bg:before {
				content: '';
				position: absolute;
				display: block;
				background: rgba(173, 173, 173, 0.2);
				top: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
			}

			.fp-bg {
				background-size: cover;
				transform: translate3d(0, 0, 0);
				-webkit-backface-visibility: hidden;
				/* Chrome, Safari, Opera */
				backface-visibility: hidden;
			}

			#slide1-1 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-1-1.jpg');
				background-position: center 80%;
			}

			#slide1-2 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3-2.jpg');
			}

			#slide1-3 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3-3.jpg');
			}

			#section2 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-2.jpg');
				background-position: center 60%;
			}

			#section2 h1 {
				color: #fff;
			}

			#slide3-1 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3.jpg');
				background-position: 50% 65%;
			}

			#slide3-2 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3-2.jpg');
			}

			#slide3-3 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3-3.jpg');
			}

			#slide3-4 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-3-4.jpg');
			}

			#section4 .fp-bg {
				background-image: url('https://alvarotrigo.com/fullPage/extensions/imgs/parallax/parallax-4.jpg');
			}

			.button a.button-purchase:hover {
				background-color: #3cc63c !important;
				color: #fff !important;
			}

			.button-purchase {
				background: #fff !important;
				color: #000 !important;
			}

			.documentation a {
				font-size: 13px;
				margin: 20px 0;
				padding: 0;
				color: #222;
			}

			/*
		* Configurations
		*/
			.actions {
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 99999;
				background: rgba(0, 0, 0, 0.6);
				padding: 13px;
				color: white;
				font-size: 13px;
			}

			.actions-option {
				margin: 0 0 15px 0;
				position: relative;
			}

			.actions select {
				display: block;
				margin: 5px 0 0 0;
				padding: 3px;
			}

			.actions-option:last-child {
				margin: 0;
			}

			.actions-title {
				display: block;
				font-size: 30px;
				padding: 10px 0;
			}

			.note {
				display: none;
				position: absolute;
				z-index: 99;
				color: #fff;
				font-size: 14px;
				left: 112%;
				bottom: -17px;
				width: 400px;
				background: rgba(0, 0, 0, 0.3);
				padding: 20px;
			}

			.note-title {
				margin-bottom: 10px;
				display: block;
			}

			.note li {
				padding: 2px 0;
				list-style: disc;
				margin-left: 26px;
			}

			.actions-compatible {
				cursor: pointer;
			}

			.actions-compatible:hover .note {
				display: block;
			}

			#actions {
				top: 153px;
				left: 30px;
				z-index: 99999;
			}

			#actions li {
				background: rgba(255, 255, 255, 0.6);
				padding: 7px 12px;
				margin: 2px;
				color: #000;
				display: inline-block;
				cursor: pointer;
			}

			#actions li:hover,
			#actions .active {
				color: #fff;
				background: #81A140;
			}
		</style>
	</head>
	<body>
		<div id="myContainer">
			<div class="section" id="section1">
				<div class="slide" id="slide1-1">
					<div class="fp-bg"></div>
					<h1>FULLPAGE</h1>
					<p>创造美丽的全屏滚动网站</p>

				</div>
				<div class="slide" id="slide1-2">
					<div class="fp-bg"></div>
					<div class="intro">
						<h1>fullPage.js</h1>
						<img src="https://alvarotrigo.com/fullPage/extensions/imgs/parallax/trusted.png" />
					</div>
				</div>
				<div class="slide" id="slide1-3">
					<div class="fp-bg"></div>
					<div class="intro">
						<h1>Free support</h1>
						<p>Extension issues are supported at no extra cost!</p>
					</div>
				</div>
			</div>
			<div class="section" id="section2">
				<div class="fp-bg" id="section2"></div>
				<div class="intro">
					<h1>FLEXIBLE</h1>
					<p>fullPage.js会经常维护更新，适应大众需求</p>
				</div>
			</div>
			<div class="section" id="section3">
				<div class="slide" id="slide3-1">
					<div class="fp-bg"></div>
					<div class="intro">
						<h1>Ease</h1>
						<p>
							fullPage.js易于使用，可自定义
							包含数十个例子，出色的文档，可社区和个人
						</p>
					</div>
				</div>
				<div class="slide" id="slide3-2">
					<div class="fp-bg"></div>
					<div class="intro">
						<h1>GUARRANTEE</h1>
						<p>30 days money back guarratee if no domain was activated.</p>
					</div>
				</div>
				<div class="slide" id="slide3-3">
					<div class="intro">
						<div class="fp-bg"></div>
						<h1>TRUSTED</h1>
						<p>Join thoudands of other developers who trusted fullPage.js extensions!</p>
					</div>
				</div>
				<div class="slide" id="slide3-4">
					<div class="fp-bg"></div>
					<div class="intro">
						<h1>DOCUMENTED</h1>
						<p>If fullPage.js is known for one thing it's for its great documentation!</p>
					</div>
				</div>
			</div>
			<div class="section" id="section4">
				<div class="fp-bg"></div>
				<div class="intro">
					<h1>IMPRESS</h1>
					<p>专为手机和平板电脑设计，完全响应</p>
				</div>
			</div>
		</div>
		<script src="js/fullpage.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			new fullpage('#myContainer', {
				sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6']
			});
		</script>
	</body>
</html>
